<template>
	<view class="lease-goods-container">
        <!-- Header -->
		<view class="header">
            <!-- 吸顶栏 -->
			<u-sticky offset-top="0" h5-nav-height="0">
                <!-- 搜索 -->
				<view class="search row">
					<u-search 
					  class="flex1"
                      v-model="keyword" 
                      :focus="showHistory"
                      @focus="showHistory = true"
                      @search="onSearch"
                      bg-color="#F4F4F4"
                    />
					<view class="search--cancel" v-show="showHistory" @tap="onCancelSearch">取消</view>
				</view>
			</u-sticky>
		</view>
        
        <!-- 搜索历史 -->
        <view v-show="showHistory" class="bg-white search-container">
            <view v-if="hotList.length" class="search-content">
                <view class="search-title">热门搜索</view>
                <view class="search-item row wrap">
                    <block v-for="(item, index) in hotList" :key="index">
                        <view class="search-words br60  mr20 mb20 lighter sm line1" @tap="onChangeKeyword(item)">{{item}}</view>
                    </block>
                </view>
            </view>
            <view v-if="historyList.length" class="search-content">
                <view class="search-title row-between">
                    <view>历史搜索</view>
                    <view class="xs muted mr20" style="padding: 10rpx 20rpx" @tap="clearSearchHistory">清空</view>
                </view>
                <view class="search-item row wrap">
                    <block v-for="(item, index) in historyList" :key="index">
                        <view class="search-words br60  mr20 mb20 lighter sm line1" @tap="onChangeKeyword(item)">{{item}}</view>
                    </block>
                </view>
            </view>
			<view class="search-mask" @tap="onCancelSearch"></view>
        </view>
        
        
        <!-- Main -->
        <view class="main" v-show="!showHistory">
            <!-- 商品分类 -->
            <view class="goods-class-wrap">
                <view class="goods-class-content">
					<view class="goods-class-item" @tap="onClassify('')">
					    <view class="goods-class-item-picture" :class="{'goods-class-item-picture--active': !classify_id}">
					        <u-image width="100" height="100" shape="circle" src="/static/images/lease_all.png" />
					    </view>
					    <view :style="{color: !classify_id ? '#24A3FF' : '#333333'}">全部</view>
					</view>
                    <block v-for="item in leaseClassifyList" :key="item.id">
                        <view class="goods-class-item" @tap="onClassify(item.id)">
                            <view class="goods-class-item-picture" :class="{'goods-class-item-picture--active': classify_id == item.id}">
                                <u-image width="100" height="100" shape="circle" :src="item.image" />
                            </view>
                            <view :style="{color: classify_id == item.id ? '#24A3FF' : '#333333'}">{{ item.name }}</view>
                        </view>
                    </block>                    
                </view>
            </view>
         
            <!-- 商品排序方式 -->
            <view class="sort-nav row bg-white mt20">
                <!-- 综合 -->
            	<view :class="'sort-tag row-center ' + (comprehensive ? 'primary' : '')" @tap="onNormal">综合</view>
                <!-- 价格 -->
            	<view class="sort-tag row-center" data-type="priceSort" @tap="onPriceSort">
            		<text :class="priceSort ? 'primary' : ''">价格</text>
            		<view>
            			<trigonometry direction="up" size="small" :color="priceSort == 'desc' ? '#FF5058' : '#333'" />
            			<trigonometry size="small" :color="priceSort == 'asc' ? '#FF5058' : '#333'" />
            		</view>
            	</view>
                <!-- 销量 -->
            	<view class="sort-tag row-center" data-type="saleSort" @tap="onSaleSort">
            		<text :class="saleSort ? 'primary' : ''">销量</text>
            		<view>
            			<trigonometry direction="up" size="small" :color="saleSort == 'desc' ? '#FF5058' : '#333'" />
            			<trigonometry size="small" :color="saleSort == 'asc' ? '#FF5058' : '#333'" />
            		</view>
            	</view>
                <!-- 商品排序展示方式 -->
            	<view class="sort-type row-center" @tap="changeType">
            		<image class="icon-sm" :src=" goodsType === 'one' ? '/static/images/icon_double.png' : '/static/images/icon_one.png'" />
            	</view>
            </view>
            
            <!-- 商品列表 -->
            <view class="goods-list-wrap">
                <!-- 商品样式1 -->
                <view v-show="goodsType == 'one'">
                    <view class="goods-container-one">
                        <block v-for="(item, index) in goodsList" :key="item.id">
                            <view class="goods-item-one" @tap="goGoodsDetail(item.id)">
                                <!-- Image -->
                                <u-image width="180" height="180" border-radius="4px" :src="item.image" />
                                
                                <view class="goods-info">
                                    <!-- Name -->
                                    <view class="row">
                                        <view class="lease-icon">租</view>
                                        <view class="goods-name line1" style="width: 420rpx;">{{ item.name }}</view>
                                    </view>
                                    <!-- Tag -->
                                    <view class="row mt10">
                                        <template v-if="item.tag">
                                            <view class="goods-tag">{{ item.tag }}</view>
                                        </template>
                  <!--                      <template v-if="item.free_shipping_type == 1">
                                            <view class="goods-tag">包邮</view>
                                        </template> -->
                                    </view>
                                    <!-- Price -->
                                    <view class="ornament goods-price">
										<view>
											<text class="xs mr10">¥</text>
											<!-- 整数 -->
											<text class="xxl">{{ formatPrice(item.price, 'integer') }}</text>
											<!-- 小数 -->
											<text class="xs">{{ formatPrice(item.price, 'decimals') }}</text>
											<!-- 单位 -->
											<text class="xs">{{ item.is_unit == 1 ? '/天' : '/月' }}</text>
										</view>
                                    </view>
                                </view>
                            </view>    
                        </block>
                    </view>
                </view>
                
                <!-- 商品样式2 -->
                <view v-show="goodsType == 'double'">
                    <view class="goods-container-double">
                        <block v-for="(item, index) in goodsList" :key="item.id">
                            <view class="goods-item-double" @tap="goGoodsDetail(item.id)">
                                <!-- Image -->
                                <u-image width="345" height="345" :src="item.image" />
                                
                                <view class="goods-info">
                                    <!-- Name -->
                                    <view class="row">
                                        <view class="lease-icon">租</view>
                                        <view class="goods-name line1">{{ item.name }}</view>
                                    </view>
                                    <!-- Tag -->
                                    <view class="row mt10">
                                        <template v-if="item.tag">
                                            <view class="goods-tag">{{ item.tag }}</view>
                                        </template>
                                        <template v-if="item.free_shipping_type == 1">
                                            <view class="goods-tag">包邮</view>
                                        </template>
                                    </view>
                                    <!-- Price -->
                                    <view class="ornament goods-price">
                                        <text class="xs mr10">¥</text>
                                        <!-- 整数 -->
                                        <text class="xxl">{{ formatPrice(item.price, 'integer') }}</text>
                                        <!-- 小数 -->
                                        <text class="xs">{{ formatPrice(item.price, 'decimals') }}</text>
                                        <!-- 单位 -->
                                        <text class="xs">{{ item.is_unit == 1 ? '/天' : '/月' }}</text>
                                    </view>
                                </view>
                            </view>   
                        </block>
                    </view>
                </view>
            </view>
               
            <!-- 加载状态 -->
            <loading-footer :status="status" :slot-empty="true">
            	<view slot="empty" class="column-center" style="padding-top: 200rpx">
            		<image class="img-null" src="/static/images/goods_null.png"></image>
            		<text class="lighter">暂无商品</text>
            	</view>
            </loading-footer>
        </view>
	</view>
</template>

<script>
    import { 
        getLeaseClassify,
        getLeaseGoodsList
    } from '@/api/lease.js';
    
	import {
		getSearchpage,
		clearSearch
	} from '@/api/store';
    
	import { loadingFun, formatPrice } from '@/utils/tools';
	import { loadingType } from '@/utils/type';


	export default {
		data() {
			return {
				keyword: '',                    // 搜索内容
				status: loadingType.LOADING,    // 加载状态
				page: 1,                        // 当前数据页面
				goodsType: 'one',            // 商品列表样式展示方式
				goodsList: [],                  // 商品列表数据
				priceSort: '',                  // 价格排序
				saleSort: '',                   // 销量排序
                classify_id: '',                // 分类ID
				showHistory: false,             // 显示搜索历史
				historyList: [],                // 搜索历史数据列表
				hotList: [],                    // 热门搜素数据列表
                leaseClassifyList: [],          // 租赁分类列表
			};
		},
		watch: {
			// 监听属性
			keyword(value, old) {
				if (!value && !this.id) this.showHistory = true
			},
            // 是否处于搜索
			showHistory(value) {
				if (value) this.getSearchpageFun();
			}
		},
		computed: {
			comprehensive() {
                const priceSort = this.priceSort;
                const saleSort = this.saleSort;
                
                return (!priceSort && !saleSort) ? true : false;
			}
		},

		onLoad(options) {
            // 获取分类列表数据
            getLeaseClassify().then(res => {
                if (res.code != 1) return;
                this.leaseClassifyList = res.data;
                // this.classify_id = res.data[0].id || '';
                // 商品列表数据请求
                this.getGoodsList();
            });
		},

        // 上拉加载更多数据
		onReachBottom() {
			this.getGoodsList();
		},
        
		methods: {
            // 格式化价格输出
            formatPrice,
            
            // 更改商品排序样式
			changeType() {
				this.goodsType = this.goodsType === 'one' ? 'double' : 'one'
			},

            // 清空搜索记录
			clearSearchHistory() {
				clearSearch().then(res => {
					if (res.code != 1) return;
                    this.getSearchpageFun();
				});
			},
			
			// 点击取消搜索
			onCancelSearch() {
				this.showHistory = false;
				// this.onRefresh();
			},
            
            // 点击分类
            onClassify(goods_id) {
                this.classify_id = goods_id;
                this.onRefresh();
            },

            // 点击综合
			onNormal() {
				this.priceSort = ''
				this.saleSort = ''
				this.onRefresh();
			},

            // 点击价格排序
			onPriceSort() {
				this.saleSort = ''
				this.priceSort = this.priceSort == 'asc' ? 'desc' : 'asc'
				this.onRefresh();
			},

            // 点击销量排序
			onSaleSort() {
				this.priceSort = ''
				this.saleSort = this.saleSort == 'desc' ? 'asc' : 'desc'
                this.onRefresh();
			},

            // 获取搜索变化
			getSearchpageFun() {
				getSearchpage().then(res => {
					if (res.code != 1) return;
                    const data = res.data;
					this.hotList = data.hot_lists
					this.historyList = data.history_lists
				});
			},
            
            // 搜索
			onSearch() {
				this.onRefresh();
			},
            
            // 刷新列表数据
			onRefresh() {
				this.showHistory = false
				this.page = 1
				this.goodsList = []
				this.status = loadingType.LOADING
				this.$nextTick(() => this.getGoodsList());
			},

            // 根据字符串搜索内容
			onChangeKeyword(item) {
				this.keyword = item;
				this.showHistory = false;
				this.onRefresh();
			},
            
            // 获取商品列表数据
            getGoodsList() {
            	if (this.status == loadingType.FINISHED) return;
                // 参数
                const field = {
                    category_id: this.classify_id,
                    keyword: this.keyword,
                    price: this.priceSort,
                    sales_sum: this.saleSort,
                }
                // 请求
            	loadingFun(
                  getLeaseGoodsList, 
                  this.page, 
                  this.goodsList, 
                  this.status, 
                  field
                ).then(res => {
                    console.log(res);
                    if (!res) return;
                    this.page = res.page;
                    this.goodsList = res.dataList;
                    this.status = res.status;
                });
            },
            
            // 查看商品详情
            goGoodsDetail(goods_id) {
                uni.navigateTo({
                    url: '/bundle/pages/lease_goods_details/lease_goods_details'
                      + '?' +'id=' + goods_id
                })
            }
		}
	};
</script>

<style scoped>

	.search {
		position: relative;
		z-index: 1;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
	}
	
	.search--cancel {
		/* padding: 0 20rpx; */
		padding-right: 20rpx;
	}
    
    .main {
        padding: 20rpx;
    }
    
    .goods-class-wrap {
        /* box-sizing: border-box; */
        height: 188rpx;
        padding: 20rpx;
        border-radius: 10px;
        background-color: #FFFFFF;
    }
    
    .goods-class-content {
        display: flex;
        height: 100%;
        overflow: auto;
    }
    
    .goods-class-item {
        /* box-sizing: border-box; */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 100%;
		padding: 10rpx;
        font-size: 24rpx;
    }
    
    .goods-class-item-picture {
        border-radius: 50%;
		margin-bottom: 10rpx;
		box-shadow: 0 0 0 1px #E5E5E5;
    }
    
    .goods-class-item-picture--active {
        /* border: 1px solid #24A3FF; */
		box-shadow: 0 0 0 1px #24A3FF;
    }
    
    .goods-class-item:nth-child(n+2) {
        margin-left: 20rpx;
    }
       
    .sort-nav {
        height: 80rpx;
        border-radius: 10px;
    }
        
    .sort-tag {
        height: 100%;
        flex: 2;
    }
    
    .sort-type {
        flex: 1;
        position: relative;
    }
    
    .sort-type::before {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        content: "";
        display: block;
        width: 1rpx;
        height: 1em;
        background-color: #888888;
    }
    
	.search-container {
		/* height: 100vh; */
		/* background-color: #101010; */
	}
	
    .search-content {
    	padding-left: 24rpx;
    	padding-bottom: 20rpx;
    }
	
	.search-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		height: 100vh;
		/* height: 200rpx; */
		/* background-color: #01D171; */
	}
    
    .search-title {
    	padding: 26rpx 0;
    }

    .search-words {
    	line-height: 52rpx;
    	height: 52rpx;
    	padding: 0 24rpx;
    	background-color: #F5F5F5;
    }

    .goods-list-wrap {
        padding: 20rpx 0;
		overflow: hidden;
	}
    
    .goods-container-double {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .goods-item-double {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 345rpx;
        height: 540rpx;
        border-radius: 7px;
        background-color: #FFFFFF;
        overflow: hidden;
    }
    
    .goods-info {
        
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 14rpx;
    }
    
    .lease-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 38rpx;
        min-height: 28rpx;
        margin-right: 10rpx;
        border-radius: 4rpx;
        font-size: 22rpx;
        background-color: #01D171;
        color: #FFFFFF;
    }
    
    .goods-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
    }
    
    .goods-tag {
        padding: 8rpx 10rpx;
        margin-right: 20rpx;
        border-radius: 4px;
        font-size: 22rpx;
        background-color: rgba(36, 163, 255, 0.1);
        color: #24a3ff;
    }
    
    .goods-price {
        display: flex;
        align-items: center;
        flex: 1;
    }
    
    .goods-container-one {
        display: flex;
        flex-direction: column;
    }
    
    .goods-item-one {
        box-sizing: border-box;
        display: flex;
        padding: 20rpx;
        border-radius: 7px;
        background-color: #FFFFFF;
    }
    
    .goods-item-one,
    .goods-item-double {
        margin-bottom: 20rpx;
    }
    
</style>
